export default {
  methods: {
    removeMarkClick(domRef) {
      const inputList = [];
      domRef.forEach((ref) => {
        const input = this.$refs[ref];
        if (input) {
          inputList.push(input);
        }
      });
      inputList.forEach((input) => {
        input.removeAttribute("style");
        // input.blur();
        const nextTips = input.nextElementSibling;
        if (nextTips && nextTips.className === "error-tips-new") {
          nextTips.style.display = "none";
        }
      });
    },
    removeMarkIdentity(domRef) {
      const inputList = [];
      domRef.forEach((ref) => {
        const input = this.$refs[ref];
        if (input) {
          inputList.push(input);
        }
      });
      const nextTipsDiv = this.$refs["error-tips-idCard"];
      inputList.forEach((input) => {
        input.removeAttribute("style");
        input.blur();
        const nextTips = input.nextElementSibling;
        if (nextTips && nextTips.className === "error-tips") {
          nextTips.style.display = "none";
        }
        if (nextTipsDiv && nextTipsDiv.className === "error-tips") {
          nextTipsDiv.style.display = "none";
          nextTipsDiv.textContent = null;
        }
      });
    },
    getAllInputs(refList) {
      const inputList = [];
      refList.forEach((ref) => {
        const input = this.$refs[ref];
        if (input) {
          inputList.push(input);
        }
      });
      return inputList;
    },
    checkInput(wrap) {
      const form = this.$refs[wrap];
      if (form) {
        const inputList = form.querySelectorAll("input");
        for (let i = 0; i < inputList.length; i++) {
          const input = inputList[i];
          if (!input.value) {
            input.style.border = "1px solid red";
            this.$nextTick(() => {
              input.scrollIntoView({ block: "center", behavior: "smooth" });
            });
            // input.focus();
            this.onceClick(input, (e) => {
              const ele = e.target || e.srcElement;
              ele.removeAttribute("style");
            });
            return false;
          }
          input.removeAttribute("style");
        }
        return true;
      }
      return false;
    },
    checkImage(wrap, value) {
      const imgWrap = this.$refs[wrap];
      if (imgWrap) {
        const imgBorder = imgWrap.querySelector(".show_upload_img");
        if (!value) {
          this.markEle(imgBorder);
          return false;
        } else if (value) {
          const style = imgBorder.getAttribute("style");
          if (style === "border: 1px solid red;") {
            imgBorder.removeAttribute("style");
          }
        }
      }
      return true;
    },
    checkRadio(wrap, value) {
      const form = this.$refs[wrap];
      console.warn(form);
      function onceClick() {
        const radioList = form.querySelectorAll("span");
        for (let i = 0; i < radioList.length; i++) {
          const radio = radioList[i].querySelector("i");
          radio.removeAttribute("style");
          radioList[i].removeEventListener("click", onceClick);
        }
      }
      if (!value && form) {
        const radioList = form.querySelectorAll("span");
        for (let i = 0; i < radioList.length; i++) {
          const radio = radioList[i].querySelector("i");
          radio.style.border = "1px solid red";
          this.$nextTick(() => {
            radio.scrollIntoView({ block: "center", behavior: "smooth" });
          });
          radioList[i].addEventListener("click", onceClick);
        }
        return false;
      }
      return true;
    },
    checkForm(list) {
      let validate = true;
      for (let i = 0; i < list.length; i++) {
        const form = list[i];
        if ("input" === form.type && !this.checkInput(form.ref)) {
          console.warn("input");
          validate = false;
          break;
        } else if (
          "image" === form.type &&
          !this.checkImage(form.ref, form.value)
        ) {
          console.warn("image");
          validate = false;
          break;
        } else if (
          "radio" === form.type &&
          !this.checkRadio(form.ref, form.value)
        ) {
          console.warn("radio");
          validate = false;
          break;
        } else if ("div" === form.type && !this.markDiv(form.ref, form.value)) {
          console.warn("div");
          validate = false;
          break;
        }
      }
      return validate;
    },
    markInput(refList) {
      const inputList = [];
      refList.forEach((ref) => {
        const input = this.$refs[ref];
        if (input) {
          inputList.push(input);
        }
      });
      function onceClick() {
        inputList.forEach((input) => {
          input.removeAttribute("style");
          input.removeEventListener("click", onceClick);
        });
      }
      inputList.forEach((input, index) => {
        input.style.border = "1px solid red";
        this.$nextTick(() => {
          input.scrollIntoView({ block: "center", behavior: "smooth" });
        });
        if (index === 0) input.focus();
        input.addEventListener("click", onceClick);
      });
    },

    markInputNew(refList) {
      const inputList = [];
      refList.forEach((ref) => {
        const input = this.$refs[ref];
        if (input) {
          inputList.push(input);
        }
      });

      function onceClick() {
        inputList.forEach((input) => {
          input.removeAttribute("style");
          input.removeEventListener("click", onceClick);
          const nextTips = input.nextElementSibling;
          if (nextTips && nextTips.className === "error-tips-new") {
            nextTips.style.display = "none";
          }
        });
      }

      inputList.forEach((input, index) => {
        input.style.border = "1px solid red";
        const nextTips = input.nextElementSibling;

        if (nextTips && nextTips.className === "error-tips-new") {
          nextTips.style.display = "block";
        }

        this.$nextTick(() => {
          input.scrollIntoView({ block: "center", behavior: "smooth" });
        });
        input.addEventListener("click", onceClick);
      });
    },
    markInputIdentity(refList, tipsText) {
      const inputList = [];
      refList.forEach((ref) => {
        const input = this.$refs[ref];
        if (input) {
          inputList.push(input);
        }
      });
      const nextTipsDiv = this.$refs["error-tips-idCard"];
      function onceClick() {
        inputList.forEach((input) => {
          input.removeAttribute("style");
          input.removeEventListener("click", onceClick);
          const nextTips = input.nextElementSibling;
          if (nextTips && nextTips.className === "error-tips") {
            nextTips.style.display = "none";
          }

          if (nextTipsDiv && nextTipsDiv.className === "error-tips") {
            nextTipsDiv.style.display = "none";
            nextTipsDiv.textContent = null;
          }
        });
      }

      inputList.forEach((input, index) => {
        input.style.border = "1px solid red";
        const nextTips = input.nextElementSibling;
        if (nextTips && nextTips.className === "error-tips") {
          nextTips.style.display = "block";
        }

        if (nextTipsDiv && nextTipsDiv.className === "error-tips") {
          nextTipsDiv.style.display = "block";
          nextTipsDiv.textContent = tipsText;
        }
        this.$nextTick(() => {
          input.scrollIntoView({ block: "center", behavior: "smooth" });
        });
        input.addEventListener("click", onceClick);
      });
    },
    markDiv(wrap, value) {
      const tag = this.$refs[wrap];
      function onceClick() {
        tag.removeAttribute("style");
        tag.removeEventListener("click", onceClick);
      }
      if (!value && tag) {
        tag.style.border = "1px solid red";
        this.$nextTick(() => {
          tag.scrollIntoView({ block: "center", behavior: "smooth" });
        });
        tag.addEventListener("click", onceClick);
        return false;
      }
      return true;
    },
    markEle(node) {
      function onceClick() {
        node.removeAttribute("style");
        node.removeEventListener("click", onceClick);
      }
      if (node) {
        node.style.border = "1px solid red";

        this.$nextTick(() => {
          node.scrollIntoView({ block: "center", behavior: "smooth" });
        });
        node.addEventListener("click", onceClick);
      }
    },
    checkContact(wrap) {
      const contactForm = this.$refs[wrap];
      const inputList = contactForm.querySelectorAll(".input-select");
      const divList = contactForm.querySelectorAll(".contactbox");
      const list = ["First", "Second", "Three"];
      for (let i = 0; i < 3; i++) {
        if (!this.form["relationship" + list[i]]) {
          this.markEle(inputList[i]);
          return false;
        }
        if (!this.form["phone" + list[i]]) {
          this.markEle(divList[i]);
          return false;
        }
      }
      return true;
    },
    checkAddition() {
      const {
        payImg,
        workerImg,
        orcImg,
        owwaImg,
        tinImg,
        driverImg,
        philHealthImg,
        pagibigImg,
        businessLicenseImg,
        cardPositiveImg,
        cardImg,
      } = this.form;
      const data = [
        payImg,
        workerImg,
        orcImg,
        owwaImg,
        tinImg,
        driverImg,
        philHealthImg,
        pagibigImg,
        businessLicenseImg,
      ];
      const arr = [];
      data.forEach((item) => {
        if (item && item !== "") {
          arr.push(item);
        }
      });
      if (!this.checkImage("cardPositiveImg", cardPositiveImg)) {
        return false;
      }
      if (!this.checkImage("cardImg", cardImg)) {
        return false;
      }
      return this.checkImage("payImg", arr.length > 0);
    },
    listenWrap(e) {
      const imgForm = this.$refs.imgForm;
      const img = this.$refs.payImg;
      if (imgForm && img) {
        const ele = e.target || e.srcElement;
        if (ele.className === "show_upload_img") {
          const imgBorder = img.querySelector(".show_upload_img");
          const style = imgBorder.getAttribute("style");
          if (style === "border: 1px solid red;") {
            imgBorder.removeAttribute("style");
          }
        }
      }
    },
    onceClick(node, cb) {
      function handleOnce(e) {
        cb && cb(e);
        node.removeEventListener("click", handleOnce);
      }
      if (node) {
        node.addEventListener("click", handleOnce);
      }
    },
  },
};
